

.heart_color{
  color: #e02d2d;
}
#app{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.content{
  margin: 30px 0 ;
  color: #333;
  font-size: 20px;
  font-weight: 700;
}

.count{
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

.main_img{
  position: relative;
  width: 500px;
  height: 400px;
  cursor: pointer;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fassets.puxiang.com%2Fuploads%2Fphoto%2Fimage%2F97697%2F20160714_142045_025.jpg&refer=http%3A%2F%2Fassets.puxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666166370&t=9abc8e3355cbe0f198b5e9d3389d6938');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.main_img img{
  width: 100%;
}

.heart{
  position: absolute;
  transform: translate(-50%,-50%);
  color: #e02d2d;
  font-size: 30px;
  animation: magnify 1s linear;
}

.small_heart{
  position: absolute;
  font-size: 20px;
  color: #e02d2d;
  transform: translate(-50%,-50%);
  transition: left 1s linear,top 1s linear;
  animation: fadeout 2.5s linear;
  animation-fill-mode: forwards;
}

@keyframes fadeout{
  0%{}
  100%,50%{
    opacity: 0;
  }

}


.rect{
  position: absolute;
  height: 100%;
  transform: translateX(-50%);
}


@keyframes magnify{
  0%{
    opacity: 1;
    font-size: 30px;
  }

  100%{
    opacity: 0;
    font-size: 150px;
  }
}